<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/online.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/public/logo.png" alt="" class="logo">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li class="check"><a href="javascript:;">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容" class="input" id="search">
                <img src="../img/public/search.png" alt="">
            </div>
            <div class="login" id="login">
                <a href="./loginAndRegister/login.html">登陆</a>
                /
                <a href="./loginAndRegister/register.html">注册</a>
            </div>
            <div class="user" id="user">
                <img src="" alt="" id="touxiang">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li id="course">课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li><a href="./userSeting.html">个人中心</a></li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <div class="search_keyword">
            <!-- 搜索到 <span>数学</span> 关键字共<span>20</span> 条，共<span>3</span>页 -->
        </div>
        <div class="lesson">
            <ul id="searchContainer">
                <!-- <li>
                    <div class="top">
                        <img src="../img/online/banner1-1.png" alt="" class="m">
                        <p>学科：英语</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>人教版语文第一节课程内容讲解</span>
                            <span class="time">地区：北京</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li>
                <li>
                    <div class="top">
                        <img src="../img/online/banner1-1.png" alt="" class="m">
                        <p>学科：英语</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>人教版语文第一节课程内容讲解</span>
                            <span class="time">地区：北京</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> -->
            </ul>
        </div>

        <div class="pageNum">
            <ul id="pageContainer" class="filterUl">
                <!-- <li class="active">1</li>
                <li>2</li>
                <li>3</li> -->
            </ul>
        </div>
    </main>
    <style>
        .search_keyword {
            font-size: 16px;
        }

        .search_keyword span {
            color: red;
        }
    </style>
    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>



    <!-- <script src="../js/ujiuye.js"></script> -->
</body>

<script src="../js/ujiuye.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../utils/http.js"></script>

<script>
    let { keyword } = qsToJson(location.search)
    // d = JSON.stringify(d)

    let mid = localStorage.getItem('mid')

    if (mid) {
        $('#login').attr('style', 'display: none;')
        $('#user').attr('style', 'display: inline-block;')
        getUser()
    } else {
        $('#login').attr('style', 'display: inline-block;')
        $('#user').attr('style', 'display: none;')
    }
    async function getUser() {
        let res = await Http({
            url: '/api/user',
            data: {
                mid
            }
        })
        let userStr = res.result.result
        $('#touxiang').attr('src', userStr.head_photo_url)
    }


    $('.out').click(function () {
        localStorage.clear()
        location.href = '.././index.html'

    })
    // let mid = localStorage.getItem('mid')
    if (mid) {
        $('#login').attr('style', 'display: none;')
        $('#user').attr('style', 'display: inline-block;')
    } else {
        $('#login').attr('style', 'display: inline-block;')
        $('#user').attr('style', 'display: none;')
    }
    // getSearch(d)
    let filterData = { page: 1, pageSize: 5, keyword: keyword }

    async function getSearch() {
        let { page, pageSize, keyword } = filterData
        let res = await Http({
            url: '/api/search',
            data: {
                page,
                pageSize,
                keyword
            }
        })

        let search = res.result.result.data
        let searchStr = ''
        search.forEach(item => {
            searchStr += `<li onclick="goToDetail('${item.cid}')">
            <div class="top">
                <img src="${item.image_src}" alt="" class="m">
                <p>学科：${item.subject_name}</p>
            </div>
            <div class="bottom">
                <div class="left">
                    <span>${item.title}</span>
                    <span class="time">地区：${item.area_name}</span>
                </div>
                <div class="right">${item.price == 0 ? '免费学习' : item.price + '元'}</div>
            </div>
        </li>`
        });
        let keyStr = `搜索到 <span>${keyword}</span> 关键字共<span>${res.result.result.rows}</span> 条，共<span>${res.result.result.totalPage}</span>页`
        $('#searchContainer').html(searchStr)
        $('.search_keyword').html(keyStr)
        setPage(res.result.result.totalPage, res.result.result.page)

    }
    getSearch()

    function goToDetail(id) {
        // alert(id)
        // return
        // alert('跳转到详情页')
        location.href = './videoDetail.html?id=' + id
    }

    $('.search').on('click', 'img', function () {

        if ($('#keyword').val() == '') {
            alert('请输入关键字')
            return
        }
        keyword = $(this).siblings('.input').val()

        filterData = { page: 1, pageSize: 5, keyword: $(this).siblings('.input').val() }
        getSearch()
    })

    function setPage(totalPage, page) {
        let next = page + 1

        if (next >= totalPage) {
            next = totalPage
        }
        let prev = page - 1

        if (prev == 0) {
            prev = 1
        }
        let pageStr = ``
        for (let i = 1; i <= totalPage; i++) {
            pageStr += `<li class="${page == i ? 'active' : ''}"><a t="page" v="${i}">${i}</a></li>`
        }
        pageStr += ``
        $('#pageContainer').html(pageStr)
    }

    $('.filterUl').on('click', 'li', function () {

        $(this).addClass('active').siblings().removeClass()

        filterData = { page: $(this).children().html(), pageSize: 5, keyword: $('#search').val() ? $('#search').val() : keyword }
        getSearch()
    })

    $('#course').click(function () {
        location.href = './course.html'
    })
</script>

</html>